<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讨论 - 牛马</title>
    <link rel="icon" href="../image/logo.ico" type="image/x-icon">
    <script src="../js/head-nav.js"></script>
    <link rel="stylesheet" href="../plugs/layui/src/css/layui.css">
    <link rel="stylesheet" href="../css/discucss.css">
    <link rel="stylesheet" href="../css/circle.css">
    <style>
        .userinfo {
            margin-bottom: 20px;
        }
    </style>

</head>

<body>
    <div class="contex layui-row layui-col-space12">
        <div class="layui-col-md2"></div>
        <div class="main layui-col-md6">
            <div class="child-1 ">
                <div class="layui-col-md3 card">
                    <a href="#">
                        <div class="interview-active-h">求职面试
                            <img src="../image/circle/interview-active.png" alt="">
                        </div>
                    </a>
                </div>
                <div class="layui-col-md3 card">
                    <a href="#">
                        <div class="jobs-promote-h">职场与内推
                            <img src="../image/circle/jobs-promote.png" alt="">
                        </div>

                    </a>
                </div>
                <div class="layui-col-md3 card">
                    <a href="#">
                        <div class="general-topic-h">技术交流
                            <img src="../image/circle/general-topic.png" alt="">
                        </div>
                    </a>
                </div>
                <div class="layui-col-md2 ">
                    <a href="#">
                        <div class="card-c">文章分享
                            <img src="../image/circle/notes.png" alt="" srcset="">
                        </div>
                    </a>
                    <a href="#">
                        <div class="card-c">意见反馈
                            <img src="../image/circle/feedback.png" alt="" srcset="">
                        </div>
                    </a>
                </div>

            </div>

            <div class="main-c1 ">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" id="tag">
                        <li class="layui-this" id="thot">最热</li>
                        <li id="tnew">最新</li>
                        <li id="ttui">推荐</li>
                        <span>
                            <button type="button" class="bt-add layui-btn layui-btn-radius layui-btn-sm"
                                onclick="takes()">发起讨论
                            </button>
                        </span>
                    </ul>
                    <div class="layui-tab-content m-values layui-col-md12">
                        <div class="layui-tab-item layui-show" id="v-info">
                            <div class="layui-row layui-col-space5 m-value">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md12 ">
                                    <ul id="page_list1">
                                    </ul>
                                    <div id="page_value1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-tab-item ">
                            <div class="layui-row layui-col-space5 m-value">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md12 ">
                                    <ul id="page_list2">
                                    </ul>
                                    <div id="page_value2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-tab-item ">
                            <div class="layui-row layui-col-space5 m-value">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md12 ">
                                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md12 ">
                                        <ul id="page_list3">
                                        </ul>
                                        <div id="page_value3"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right layui-col-md2 ">
            <div class="child-h ">
                <div class="layui-col-xs2 right-c">
                    <div><a href="#"><img src="../image/circle/live.png" alt=""></a></div>
                    <div>
                        <a href="#">收藏</a>
                    </div>
                </div>
                <div class="layui-col-xs2 right-c">
                    <div><a href="#"><img src="../image/circle/message.png" alt=""></a></div>
                    <div>
                        <a href="#">订阅</a>
                    </div>
                </div>
                <div class="layui-col-xs2 right-c">
                    <div><a href="#"><img src="../image/circle/discuss.png" alt=""></a></div>
                    <div>
                        <a href="#">讨论</a>
                    </div>
                </div>
                <div class="layui-col-xs2 right-c">
                    <div><a href="#"><img src="../image/circle/book.png" alt=""></a></div>
                    <div>
                        <a href="#">文章</a>
                    </div>
                </div>
            </div>
            <div class="select-s">
                <input type="text" name="title" required lay-verify="required" placeholder="搜索" autocomplete="off"
                    class="layui-input ">
            </div>
            <div class="right-m layui-col-md12" id="hotright">
                <li class="layui-card-header rc-h">必读榜</li>
                <ul class="layui-card" v-for="d,index in hdiscuss">
                    <li class="layui-card-body rc-c">
                        <a>{{index+1}}</a><a :href="'discuss.html?id='+d.id"><img id="u-img"
                                :src="'../image/' +d.avatar" alt=""><span class="litle">{{d.title}}</span></a>
                        <div class="rc-c-values"><a :href="'discuss.html?id='+d.id">{{d.description}}</a></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md1">

        </div>
    </div>


    <script src="../plugs/layui/src/modules/element.js"></script>
    <script src="../plugs/layui/src/layui.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/moment.js"></script>

    <script type="text/javascript">
        //分页数据展示页面
        function takes() {
            token = localStorage.getItem("token");
            if (token == null) {
                layer.msg("请先登录", { icon: 5, anim: 6 });
            }else{
                window.location.href = 'takes.html';
            }
        }
        var vm = new Vue({
            el: "#hotright",
            data() {
                return {
                    hdiscuss: "",
                };
            },
            mounted() {
                this.discuss();
            },
            methods: {
                discuss: function () {
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:70/devu/discuss/hot',
                        data: { pageSize: 8, pageNum: 1 },
                        success: function (res) {
                            vm.hdiscuss = res.content.content;
                        }
                    });
                }
            }
        })


        $(function () {
            var datasize;
            $.get('http://localhost:70/devu/discuss/getSize', function (res) {
                datasize = res.content;
                getpage(datasize, "http://localhost:70/devu/discuss/hot", "page_value1", "page_list1");
            })
            $("#thot").click(function () {
                getpage(datasize, "http://localhost:70/devu/discuss/hot", "page_value1", "page_list1");
            })
            $("#tnew").click(function () {
                getpage(datasize, "http://localhost:70/devu/discuss/new", "page_value2", "page_list2");
            })
            $("#ttui").click(function () {
                getpage(datasize, "http://localhost:70/devu/discuss/hot", "page_value3", "page_list3");
            })
        })

        function getpage(datasize, url, page_value, page_list) {
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: page_value //注意，这里的 test1 是 ID，不用加 # 号
                    , count: datasize //数据总数，从服务端得到
                    , layout: ['prev', 'page', 'next', 'refresh', 'skip']
                    , limit: 7
                    , jump: function (obj) {
                        $.get(url, { pageSize: obj.limit, pageNum: obj.curr }, function (res) {
                            let pages = res.content;
                            let pageTotal = pages.totalPages;
                            let datas = pages.content;
                            if (datas.length > 7) {
                                Datass = datas.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            } else {
                                Datass = datas;
                            }
                            document.getElementById(page_list).innerHTML = function () {
                                var arr = [],
                                    thisData = Datass;
                                layui.each(thisData, function (index, item) {
                                    item.gmtCreate = moment(item.gmtCreate).format('YYYY年MM月DD日 HH:mm:ss');
                                    item.gmtModified = moment(item.gmtModified).format('YYYY年MM月DD日 HH:mm:ss');
                                    item.avatar = "../image/" + item.avatar;
                                    arr.push('<div class="userinfo layui-col-md12" id="v-info"> <a href="javascript:jump(' + item.id + ')"> <div class="center1 layui-row "> <div class="layui-col-md10"> <img src=' + item.avatar + ' class="artr"></img> <h3><b>' + item.title + '</b></h3> </div></div></a> <div class="center2"> <p>力扣 (LeetCode)' + item.author + '发起于 &nbsp;<span id="creat-time">' + item.gmtCreate + '</span> &nbsp;&nbsp; 最近编辑于 &nbsp;<span id="update-time">' + item.gmtModified + '&nbsp;&nbsp;</span>来自 &nbsp;<span id="ip">上海</span></p></div><a href="javascript:jump(' + item.id + ')"> <div class="content"> <p>' + item.description + '</p></div></a> <div class="foot layui-row"> <div class="layui-col-md3"><i class="layui-icon layui-icon-praise" id="live">' + item.likeNum + '</i> </div><div class="layui-col-md3"><i class="layui-icon layui-icon-star-fill" id="fill">收藏</i> </div><div class="layui-col-md3"><i class="layui-icon layui-icon-share" id="share">分享</i> </div></div></div>');
                                });
                                return arr.join('');
                            }();
                        })
                    }
                });
            });
        }
        function jump(did) {
            url = "discuss.html?id=" + did;
            window.location = url;
        }
    </script>
    <script src="../js/bottom-nav.js"></script>
</body>

</html>